<template>
  <div>
    <!-- <div @click="isopen = !isopen" class="detailwebview">
      <span style="padding-left:12px">{{ _title }}</span>
      <span style="padding-right:12px">{{ str }}</span>
    </div> -->

    <!-- <div class="frame-box"> -->
    <!-- <div style="flex:1;margin-right: 8px;"> -->
    <!-- {{ localPath }} -->
    <!-- <CodeMirror v-model="code" dark :codeStyle="{ width: '500px', height: '500px', fontSize: '16px' }" /> -->
    <!-- </div> -->
<!--    <iframe  class="webview" :src="'https://tmui.design/h5/#'+url"></iframe>-->
    <iframe  class="webview" :src="'http://127.0.0.1:8888/#'+url"></iframe>

    <!-- </div> -->
    <!-- <div v-if="isShowLeftWin" class="leftWin">
			<iframe scrolling="auto" class="webview" :src="url"></iframe>
		</div> -->
  </div>
</template>


<script lang="ts" setup>


import { ref, onMounted, computed } from 'vue'
import CodeMirror from './CodeMirror.vue'

import axios from 'axios'

interface Props {
  url: string;
  // 标题
  title?: string;
  // 数据 [{name:xxx,value:xxx}]
  localPath: string;
}

// Props 赋予初始值
const props = withDefaults(defineProps<Props>(), {
  url: '',
  title: '',
  localPath: '',
})

const isShowLeftWin = ref(false);

function readFile(filePath) {
  // 创建一个新的xhr对象
  let xhr = null as any
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else {
    // eslint-disable-next-line
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }
  console.log(xhr)

  const okStatus = document.location.protocol === 'file' ? 0 : 200
  xhr.open('GET', filePath, false)
  xhr.overrideMimeType('text/html;charset=utf-8')
  xhr.send(null)
  return xhr.status === okStatus ? xhr.responseText : null
}
onMounted(async () => {

  let title = readFile('./frame.vue')
  console.log(title)
  // const response = await axios.get('./frame.vue')
  // console.log(response);

  try {
    await import(/* @vite-ignore */`./frame.vue`).then((res: any) => {
      const { defaul } = res
      console.log(res.default);
      code.value = res.default.toString()

    });
    // code.value = VueComponent.toString();
    // console.error(code.value);

  } catch (error) {
    console.error(error);
  }

  let w = window.innerWidth;
  if (w >= 1600) isShowLeftWin.value = true;
  window.addEventListener("resize", function (e) {
    w = window.innerWidth;
    if (w >= 1600) {
      // t.isShowLeftWin = true;
    } else {
      // t.isShowLeftWin = false;
    }
  })
})

const isopen = ref(false)
const str = computed(() => {
  return isopen.value === true ? "－" : "＋"
})

const _title = computed(() => {
  return props.title
})

const code = ref(`<script setup lang="ts">
import { dateFormat, requestAnimationFrame, cancelAnimationFrame, rafTimeout, cancelRaf } from 'vue-amazing-ui'
<\/script>
`)
</script>

<style>
.leftWin {
  position: fixed;
  right: 10px;
  top: calc(var(--navbar-height) + 30px);
  z-index: 8;
}

/* 	@media screen and (max-width: 1600px) {
		.leftWin {
			display: none;
			visibility: hidden;
		}
	} */
.webviewbody {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.detailwebview {
  width: 100%;
  padding: 12px 0px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  border: 1px solid rgba(200, 200, 200, 0.4);
  background-color: rgba(193, 184, 255, 0.4);
  border-radius: 10px;
}

.webview {
  width: 100%;
  width: calc(375px / 1.4);
  height: 560px;
  background: transparent;
  border: none;
  margin: auto;
  padding: 0;
  /* margin-top: 12px; */
  border-radius: 32px;
  border: 3px solid rgba(41, 41, 41, 0.2);
  /* box-shadow: 2px 2px 24px rgba(22, 115, 255, 0.2); */

}

.frame-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>
